<template>
    <div>
        <van-tabbar id="bottom_bar" v-model="active" type="card" active-color="#da4f49" placeholder="true">
            <van-tabbar-item badge="3" name="home" replace to="/">
                <span>发现</span>
                <template #icon="props">
                    <img :src="props.active ? icon.active : icon.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item name="volume" icon="volume" replace to="/boke">播客</van-tabbar-item>
            <van-tabbar-item name='manager' icon="manager" replace to="/minePage">我的</van-tabbar-item>
            <van-tabbar-item name="friends" icon="friends" replace to="/guanzhu">关注</van-tabbar-item>
            <van-tabbar-item name="comment" icon="comment" replace to="/shequ">社区</van-tabbar-item>
        </van-tabbar>
    </div>

</template>

<script>
    import { toRefs, reactive, ref } from 'vue'
    export default ({
        name: 'bottomBar',
        setup() {
            const active = ref('home');
            const icon = {
                active: require('../assets/icon_bottomBar/wangyiyun_1.png'),
                inactive: require('../assets/icon_bottomBar/wangyiyun.png'),
            }
            const data = reactive({

            })


            return {
                ...toRefs(data),
                active,
                icon,
            }

        }
    })
</script>

<style>
    .van-tabbar {
        border-top: 1px solid #ccc;
    }
</style>